<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="false" title="我的技能" />
		<!-- body -->
		<view class="body" style="flex: 1;padding: 12px 15px;">
			<!-- selected result -->
			<view style="display: flex;">
				<text style="font-size: 16px;font-weight: bold;color: #333333;">选择技能：</text>
				<view style="flex: 1;display: flex;flex-wrap: wrap;">
					<view v-for="(item, index) in allSkills" :key="index" :class="[item.isSelect ? '' : 'no-display-option']"
					style="color: #2456E0;font-size: 14px;margin-right: 15px;margin-bottom: 12px;"
						>{{item.name}}</view>
				</view>
			</view>
			<!-- items -->
			<view style="display: flex;flex-wrap: wrap;margin-top: 20px;">
				<view :class="[item.isSelect ? 'options-skill options-skill-select' : 'options-skill']"
					v-for="(item, index) in allSkills" :key="index" @click="chooseOption(item.name, index)">{{item.name}}</view>
			</view>
			<text style="font-size: 12px;color: #999;text-align: center;">（不可选择的技能需要上传相关的技能资质证书后方可选择）</text>
		</view>
		<view class="page-btn" @click="submit">确认修改</view>
	</view>
</template>

<script>
	import { skillOption, selectOption, updateUserInfor } from '../../api'
	export default {
		data() {
			return {
				allSkills: [],
				myskillType: [],
			}
		},
		mounted() {
			console.log('1111')
			this.getSkillOption()
		},
		methods: {
			chooseOption(name, indx) {
				this.$set(this.allSkills[indx], 'isSelect', !this.allSkills[indx].isSelect );
				console.log(name,indx,this.myskillType,this.allSkills)
			},
			getSkillOption() {
				skillOption().then(res => {
					console.log('技能页===', res)
					if(res.status == 200) {
						let allSkills = res.data.skillTypes
						let userId = uni.getStorageSync('userInfo').id
						
						selectOption(userId).then(res => {
							console.log('技能页===111', res)
							if(res.status == 200) {
								if(res.data.skillType){
									let myskillType = res.data.skillType
									let myskillArr = myskillType.split(',')
									allSkills.forEach((item,index)=>{
										for(let j = 0; j < myskillArr.length; j++) {
											if(myskillArr[j] == item.name) {
												item.isSelect = true
											}
										}
									})
									this.allSkills = allSkills
									console.log('this.allSkills', this.allSkills)
									this.myskillType = myskillArr
									console.log('this.myskillType', this.myskillType)
								}else{
									this.allSkills = allSkills
								}
							}
						})
					}
					
				})
			},
			submit() {
				let arrFilter = this.allSkills.filter(a=>{
					return a.isSelect
				})
				let skillType = []
				arrFilter.map((item,index)=>{
					skillType[index]=item.name
				})
				if (skillType.length==0) {
					uni.showToast({
						title: '请选择技能',
						icon: 'none',
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
					id: userInfo.id,
					skillType: skillType.join(),
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '修改成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
				
		}
	}
</script>

<style>
.options-skill {
	padding: 9px 28px;
	background-color: #F6F7F9;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	/* color: #D2D2D2; */
	margin-right: 20px;
	margin-bottom: 12px;
	border-radius: 4px 4px 4px 4px;
}
.options-skill-select {
	background-color: #2456E0;
	color: #fff;
}
.no-display-option {
	display: none;
}
</style>
